<script setup>

import Gap from '@/view/ai/components/Gap.vue';
import CardTabs from '@/view/ai/components/CardTabs.vue';
import SummaryDetail from '@/view/ai/components/SummaryDetail.vue';
import HorizontalLine from '@/view/ai/components/HorizontalLine.vue';
import ButtonDiy from '@/view/ai/components/ButtonDiy.vue';
</script>

<template>
	<div class="wrap">
		<card-tabs :tab-index="1" :label-name="'A'">
			<template #left>
				<div class="left">
					<div class="row1">
						探讨在当前注重外貌的社会环境中，化妆品市场的消费者行为变化以及企业所采取的有效的营销手段，例如社交媒体营销、网红带货等。
					</div>
					<horizontal-line margin-gap="20"/>
					<div class="row2">
						<span class="first">9篇</span>
						<span >关联度区间：100%-100%</span>
					</div>
					<gap :height="20"/>
					<button-diy text="展开学习"/>
				</div>
			</template>
			<template #middle>
				<div class="right">
					<div class="item">
						<summary-detail :line-clamp="8" title="SACA回答："/>
					</div>
				</div>
			</template>
		</card-tabs>
	</div>

</template>

<style scoped lang="scss">
.wrap{
	margin-bottom: 40px;
	.left{
		.row1{
			.desc{
				font-weight: 305;
				font-size: 18px;
				color: #000000;
				line-height: 21px;
			}
			.tag{
				padding: 3px 16px;
				margin-left: 12px;
				background: #00BCFB;
				border-radius: 4px 4px 4px 4px;
				font-size: 14px;
				color: #FFFFFF;
			}
		}
		.row2{
			font-weight: 305;
			font-size: 16px;
			color: #000000;
			line-height: 19px;
			.first{
				margin-right: 32px;
			}
		}
	}
	.right{
		padding: 40px;
	}
}
</style>
